import User from "../class/User";
import { defineStore } from "pinia";
import Editor from "wangeditor";
import expressions from "../json/expressions.json";
import Conversition from "@/class/Conversition";
interface MainStoreState {
  sender: User;
  reciver: User;
  readyReciver: User;
  navId: number;
  isVideoShow: boolean;
  isVideoReciverShow: boolean;
  VideoReciver: User,
  sessionList: Array<any>;
  sessionSelectId: number;
  expressions: any;
  allSessionList: Array<any>;
  allSessionSelectId: number;
  socket: any;
  noCode: number;
  openMusic: boolean;
  tipMusic: HTMLAudioElement | null;
  editor: Editor | null;
  chatEditor: Editor | null;
  expressionShow: boolean;
  contentScrollbar: any;
  editorData: string;
  sendInfo: string;
  navList: Array<{ id: number; name: string; icon: string }>;
  theme: string;
  conversitionList: Array<Conversition>;
}
export const useMainStore = defineStore({
    id: "main",
    state: ():MainStoreState => {
        return {
            sender: {} as User,
            reciver: {} as User,
            readyReciver: {} as User,
            navId: 1,
            isVideoShow: false, //视频显示
            isVideoReciverShow: false,//收到视频通知
            VideoReciver: {}as User, //视频接收者
            sessionList: [] as Array<any>, //会话列表
            sessionSelectId: 0,
            expressions: expressions, //表情列表
            allSessionList: [] as Array<any>, //所有用户会话列表
            allSessionSelectId: 0,
            socket: null as any,
            noCode: +new Date,
            openMusic: false,
            tipMusic: null as HTMLAudioElement | null,
            editor: null as Editor | null,
            chatEditor: null as Editor | null,
            expressionShow: false, //表情包显示
            contentScrollbar: null as any, //会话窗口
            editorData: '',
            sendInfo: '',
            navList: [
                { id: 1, name: "消息", icon: "icon-message" },
                { id: 2, name: "用户", icon: "icon-merbe" },
                // { id: 3, name: "群聊", icon: "icon-group" },
            ],
            theme: 'default',
            conversitionList: [] as Array<Conversition> //聊天信息表
        }
    },
    persist: {
        enabled: true,
        strategies: [
            {
                storage: localStorage,
                paths: ['sender'] // 持久化数据
            }
        ]
    },
    actions: {
        initEditor() {
            if (this.editor != null) {
                this.editor.destroy();
                this.editor = null;
            }
            this.editor = new Editor("#chatEditor");
            this.editor.config.showFullScreen = false;
            this.editor.config.focus = true;

            // 自定义菜单栏
            this.editor.config.menus = [];

            // change
            this.editor.config.onchange = (html: string) => {
                this.editorData = html;
            };

            // 上传最多1张
            this.editor.config.uploadImgMaxLength = 1;
            // 添加上传本地图片接口
            this.editor.config.customUploadImg = function (
                files: any,
                insert: (arg0: any) => void
            ) {
                insert(files);
            };
            // 聚焦操作
            setTimeout(() => {
                this.editor.create();
                this.editor.txt.html(this.editorData);
            }, 200)
        },
        initSetInfo(data: any) {
            this.sender = data?.myInfo;
            window.localStorage.setItem("token", data?.token);
        },
        toTop() {
            setTimeout(() => {
                this.contentScrollbar.scrollTo({ top: 9999 })
            })
        },
        sendLocal(conversition: Conversition) {
            this.conversitionList.push(conversition);
            this.toTop();
        },
        playMusic() {
            if (this.tipMusic != null && this.openMusic) {
                this.tipMusic.currentTime = 0;
                this.tipMusic.play();
            }
        },
        // websocket发送消息
        sendInfo(conversition: Conversition) {
            let reciverId = this.reciver?.FormId || this.reciver.Id;
            let data = {
                Conversition: conversition,
                ReciverId: reciverId,
                Sender: this.sender,
            };
            if (this.socket != null) {
                this.socket.emit("sendMsg", data);
            }
        },
        logout() {
            this.allSessionList = [];
            window.localStorage.removeItem("token");
            window.localStorage.removeItem("sender");
            if (this.socket != null) {
                this.socket.disconnect();
            }
            window.location.reload();
        },
        changeReaded(id: number) {
            let userConversition = this.conversitionList.filter(
                (x) =>
                    x.SendId == id &&
                    x.ReciverId == this.sender.Id &&
                    !x.ReadFlag
            );
            if (userConversition.length > 0) {
                for (let i = 0; i < userConversition.length; i++) {
                    userConversition[i].ReadFlag = true;
                }
            }
            let query = {
                SendId: id,
                ReciverId: this.sender.Id,
            };
            this.socket.emit("changeMsgRead", query);
        },
    }
});